<template>
    <!-- <div class="LayerCtrl">
        <div v-for="group in layerList2" :key="group.groupName" class="group">
            <div class="group-name">
                <el-checkbox v-model="group.isShowAll" @change="isShowGroup(group)" />
                <span class="m-l-10">{{ group.groupName }}</span>
            </div>
            <div class="group-body">
                <div v-for="layer in group.children" :key="layer.id" class="row">
                    <el-checkbox v-model="layer.show" @change="(checked) => isShowLayer(layer.id, checked)" />
                    <img v-if="layer.icon" class="m-l-10" :class="layer.clasName" :src="layer.icon" alt="">
                    <span class="name m-l-10">{{ layer.name }}</span>
                </div>
            </div>

        </div>
    </div> -->
    <div class="LayerCtrl">
        <div v-for="group in layerList2" :key="group.groupName" class="group">
            <div class="group-name">
                <el-checkbox v-model="group.isShowAll" @change="isShowGroup(group)" />
                <span class="m-l-10">{{ group.groupName }}</span>
            </div>
            <div class="group-body">
                <div v-for="layer in group.children" :key="layer.id" :class="layer.children?'row2': 'row'" 
                :style="layer.children?'padding=0':''">
                    <!-- <el-checkbox v-if="!layer.children" v-model="layer.show" @change="(checked) => isShowLayer(layer.id, checked)" /> -->
                    <el-checkbox v-if="!layer.children" v-model="layer.show" @change="(checked) => handlerClick(layer.id, checked,group)" />
                    <el-checkbox v-if="layer.children" v-model="layer.show" @change="isShowGroupInner(layer,group)" />
                    <img v-if="layer.icon" class="m-l-10" :class="layer.clasName" :src="layer.icon" alt="">
                    <span class="name m-l-10">{{ layer.name }}</span>
                    <template v-if="layer.children">
                        <div v-for="subLayer in layer.children" :key="subLayer.id" class="row" style="padding-left: 15px;">
                            <!-- <el-checkbox v-model="subLayer.show" @change="(checked) => isShowLayer(subLayer.id, checked)" /> -->
                            <el-checkbox v-model="subLayer.show" @change="(checked) =>  handlerClick2(subLayer.id, checked,group,layer)" />
                            <img v-if="subLayer.icon" class="m-l-10" :class="subLayer.clasName" :src="subLayer.icon" alt="">
                            <span class="name m-l-10">{{ subLayer.name }}</span>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { initLoad, callUIInteraction, addResponseEventListener } from '@/PixelStreaming/webrtcVideo.js'
import MB from './mixins/layer/MB'
import WATA from './mixins/layer/WATA'
import WATAM from './mixins/layer/WATAM'
import RIVL from './mixins/layer/RIVL'
import FZC from './mixins/layer/FZC'
import AZD from './mixins/layer/AZD'
import ZYLX from './mixins/layer/ZYLX'
import WXQ from './mixins/layer/WXQ'
import LH from './mixins/layer/LH'
import QSYDW from './mixins/layer/QSYDW'
import QL from './mixins/layer/QL'
import QLYHDC from './mixins/layer/QLYHDC'
import RHDC from './mixins/layer/RHDC'
import TYB from './mixins/layer/TYB'
import JYYLZ from './mixins/layer/JYYLZ'
import LSHH from './mixins/layer/LSHH'
import LSSHZH from './mixins/layer/LSSHZH'
import WXYJGBZ from './mixins/layer/WXYJGBZ'
import YHCL from './mixins/layer/YHCL'
import ZDJCZ from './mixins/layer/ZDJCZ'
import XFHZLSHG from './mixins/layer/XFHZLSHG'
import MZGTZD from './mixins/layer/MZGTZD'
import KGDL from './mixins/layer/KGDL'

import DOM from './mixins/layer/DOM'
import TERR from './mixins/layer/TERR'
import B3DM from './mixins/layer/B3DM'
import DMX from './mixins/layer/DMX'

//风险普查
import FHTZZ from './mixins/layer/FHTZZ'
import SJHSTZZ from './mixins/layer/SJHSTZZ'
import HSPLZ from './mixins/layer/HSPLZ'
// import SHZHFXQH from './mixins/layer/SHZHFXQH'
import SHZHDFXQ from './mixins/layer/SHZHDFXQ'
import SHZHZFXQ from './mixins/layer/SHZHZFXQ'
import SHZHGFXQ from './mixins/layer/SHZHGFXQ'

import DWCFW from './mixins/layer/DWCFW'
import SHG from './mixins/layer/SHG'
import SYXZRC from './mixins/layer/SYXZRC'
import ZYGGJCSS from './mixins/layer/ZYGGJCSS'
// 山洪沟洪水淹没分析 - *年一遇
import FIVEYEAR from './mixins/layer/FIVEYEAR'
import TENYEAR from './mixins/layer/TENYEAR'
import TWENTYYEAR from './mixins/layer/TWENTYYEAR'
import FIFTYYEAR from './mixins/layer/FIFTYYEAR'
import HUNDREDYEAR from './mixins/layer/HUNDREDYEAR'

// 风险隐患调查与影响分析
import FXYHBHDX from './mixins/layer/FXYHBHDX'
import WHDTDCFXCG from './mixins/layer/WHDTDCFXCG'


export default {
    name: 'BasinChange',
    mixins: [
        TERR,
        DOM,
        B3DM,
        MB,
        WATA,
        WATAM,
        RIVL,
        FZC,
        AZD,
        ZYLX,
        WXQ,
        LH,
        QSYDW,
        QL,
        QLYHDC,
        RHDC,
        TYB,
        JYYLZ,
        LSHH,
        LSSHZH,
        WXYJGBZ,
        YHCL,
        ZDJCZ,
        XFHZLSHG,
        MZGTZD,
        DMX,
        KGDL,

        FHTZZ,
        SJHSTZZ,
        HSPLZ,

        // SHZHFXQH,
        SHZHDFXQ,
        SHZHZFXQ,
        SHZHGFXQ,
        DWCFW,
        SHG,
        SYXZRC,
        ZYGGJCSS,

        FIVEYEAR,
        TENYEAR,
        TWENTYYEAR,
        FIFTYYEAR,
        HUNDREDYEAR,

        FXYHBHDX,
        WHDTDCFXCG,

    ],
    data() {
        return {
            
            isIndeterminate: false,
            layerList2: [
                {
                    groupName: '基础图层',
                    isShowAll: false,
                    children: {
                        TERR: {
                            id: 'TERR',
                            name: '开启地形',
                            show: true
                        },
                        B3DM: {
                            id: 'B3DM',
                            name: '倾斜摄影',
                            show: false
                        },
                        // DOMOL: {
                        //     id: 'DOMOL',
                        //     name: '正摄影像',
                        //     show: true
                        // }
                    }
                },
                {
                    groupName: '专题图层',
                    isShowAll: false,
                    children: {
                        MB: {
                            id: 'MB',
                            name: '外围遮罩',
                            icon: require('@/assets/map/layerIconNew/MB.png'),
                            show: false
                        },
                        WATAM: {
                            id: 'WATAM',
                            name: '流域边界',
                            icon: require('@/assets/map/layerIconNew/WATAM.png'),
                            show: true,
                            clasName: "imgs"
                        },
                        WATA: {
                            id: 'WATA',
                            name: '小流域',
                            icon: require('@/assets/map/layerIconNew/WATA.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        DMX: {
                            id: 'DMX',
                            name: '断面',
                            icon: require('@/assets/map/layerIconNew/LSHH.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        HL: {
                            id: 'HL',
                            name: '河流',
                            icon: require('@/assets/map/layerIconNew/HL.png'),
                            show: true,
                            clasName: "imgs01"
                        },
                        FZC: {
                            id: 'FZC',
                            name: '防治村',
                            // icon: require('@/assets/map/layerIconNew/FZC.png'),
                            icon: require('@/assets/map/layerIconNew/fangzhicun.png'),
                            show: true
                        },
                        AZD: {
                            id: 'AZD',
                            name: '安置点',
                            icon: require('@/assets/map/layerIconNew/AZD.png'),
                            show: false
                        },
                        ZYLX: {
                            id: 'ZYLX',
                            name: '转移路线',
                            icon: require('@/assets/map/layerIconNew/ZYLX.png'),
                            show: false,
                            clasName: "imgss"
                        },
                        WXQ: {
                            id: 'WXQ',
                            name: '危险区',
                            icon: require('@/assets/map/layerIconNew/WXQ.png'),
                            show: false
                        },
                        LH: {
                            id: 'LH',
                            name: '路涵',
                            icon: require('@/assets/map/layerIconNew/LH.png'),
                            show: false
                        },
                        QSYDW: {
                            id: 'QSYDW',
                            name: '企事业单位',
                            icon: require('@/assets/map/layerIconNew/QSYDW.png'),
                            show: false
                        },
                        QL: {
                            id: 'QL',
                            name: '桥梁',
                            icon: require('@/assets/map/layerIconNew/QL.png'),
                            show: false
                        },
                        // QLYHDC: {
                        //     id: 'QLYHDC',
                        //     name: '桥涵(隐患调查)',
                        //     icon: require('@/assets/map/layerIconNew/QLYHDC.png'),
                        //     show: false
                        // },
                        RHDC: {
                            id: 'RHDC',
                            name: '入户调查',
                            icon: require('@/assets/map/layerIconNew/RHDC.png'),
                            show: false
                        },
                        // TYB: {
                        //     id: 'TYB',
                        //     name: '塘堰坝',
                        //     icon: require('@/assets/map/layerIconNew/TYB.png'),
                        //     show: false
                        // },
                        JYYLZ: {
                            id: 'JYYLZ',
                            name: '简易雨量站',
                            icon: require('@/assets/map/layerIconNew/JYYLZ.png'),
                            show: false
                        },
                        LSHH: {
                            id: 'LSHH',
                            name: '历史洪痕',
                            icon: require('@/assets/map/layerIconNew/LSHH.png'),
                            show: false
                        },
                        LSSHZH: {
                            id: 'LSSHZH',
                            name: '历史山洪灾害',
                            icon: require('@/assets/map/layerIconNew/LSSHZH.png'),
                            show: false
                        },
                        WXYJGBZ: {
                            id: 'WXYJGBZ',
                            name: '无线广播站',
                            icon: require('@/assets/map/layerIconNew/WXYJGBZ.png'),
                            show: false
                        },
                        // YHCL: {
                        //     id: 'YHCL',
                        //     name: '村落信息',
                        //     icon: require('@/assets/map/layerIconNew/YHCL.png'),
                        //     show: false
                        // },
                        YHCL: {
                            id: 'YHCL',
                            name: '非防治村 ',
                            icon: require('@/assets/map/layerIconNew/YHCL.png'),
                            show: false
                        },
                        ZDJCZ: {
                            id: 'ZDJCZ',
                            name: '自动监测站',
                            icon: require('@/assets/map/layerIconNew/ZDJCZ.png'),
                            show: false
                        },
                        XFHZLSHG: {
                            id: 'XFHZLSHG',
                            name: '需防治山洪沟',
                            icon: require('@/assets/map/layerIconNew/XFHZLSHG.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        // MZGTZD: {
                        //     id: 'MZGTZD',
                        //     name: '面状沟滩占地',
                        //     icon: require('@/assets/map/layerIconNew/WXQ.png'),
                        //     show: false
                        // }
                    }
                },
                {
                    groupName: '风险普查',
                    isShowAll: false,
                    children: {
                        FHTZZ: {
                            id: 'FHTZZ',
                            name: '防洪特征值',
                            icon: require('@/assets/map/layerIconNew/FHTZZ.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        SJHSTZZ: {
                            id: 'SJHSTZZ',
                            name: '设计洪水特征值',
                            icon: require('@/assets/map/layerIconNew/SJHSTZZ.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        HSPLZ: {
                            id: 'HSPLZ',
                            name: '洪水频率值',
                            icon: require('@/assets/map/layerIconNew/HSPLZ.png'),
                            show: false,
                            clasName: "imgs"
                        },
                        SHZHYSZQDC: {
                            id: 'SHZHYSZQDC',
                            name: '山洪灾害易受灾区调查',
                            show: false,
                            children: {
                                DWCFW: {
                                    id: 'DWCFW',
                                    name: '低洼处房屋',
                                    icon: require('@/assets/map/layerIconNew/DWCFW.png'),
                                    show: false
                                },
                                SHG: {
                                    id: 'SHG',
                                    name: '山洪沟',
                                    icon: require('@/assets/map/layerIconNew/SHG.png'),
                                    show: false,
                                    clasName: "imgs"
                                },
                                SYXZRC: {
                                    id: 'SYXZRC',
                                    name: '受影响自然村',
                                    icon: require('@/assets/map/layerIconNew/SYXZRC.png'),
                                    show: false
                                },
                                ZYGGJCSS: {
                                    id: 'ZYGGJCSS',
                                    name: '重要公共基础设施',
                                    icon: require('@/assets/map/layerIconNew/ZYGGJCSS.png'),
                                    show: false
                                },
                            }
                        },
                        SHZHFXQH: {
                            id: 'SHZHFXQH',
                            name: '山洪灾害风险区划',
                            // icon: require('@/assets/map/layerIconNew/SHZHFXQH.png'),
                            show: false,
                            children: {
                                SHZHDFXQ: {
                                    id: 'SHZHDFXQ',
                                    name: '低风险区',
                                    icon: require('@/assets/map/layerIconNew/SHZHDFXQ.png'),
                                    show: false
                                },
                                SHZHZFXQ: {
                                    id: 'SHZHZFXQ',
                                    name: '中风险区',
                                    icon: require('@/assets/map/layerIconNew/SHZHZFXQ.png'),
                                    show: false
                                },
                                SHZHGFXQ: {
                                    id: 'SHZHGFXQ',
                                    name: '高风险区',
                                    icon: require('@/assets/map/layerIconNew/SHZHGFXQ.png'),
                                    show: false
                                },
                            }

                        },
                        SHGHSYMFX: {
                            id: 'SHGHSYMFX',
                            name: '山洪沟洪水淹没分析',
                            show: false,
                            children: {
                                FIVEYEAR: {
                                    id: 'FIVEYEAR',
                                    name: '5年一遇',
                                    icon: require('@/assets/map/layerIconNew/FIVEYEAR.png'),
                                    show: false
                                },
                                TENYEAR: {
                                    id: 'TENYEAR',
                                    name: '10年一遇',
                                    icon: require('@/assets/map/layerIconNew/TENYEAR.png'),
                                    show: false
                                },
                                TWENTYYEAR: {
                                    id: 'TWENTYYEAR',
                                    name: '20年一遇',
                                    icon: require('@/assets/map/layerIconNew/TWENTYYEAR.png'),
                                    show: false
                                },
                                FIFTYYEAR: {
                                    id: 'FIFTYYEAR',
                                    name: '50年一遇',
                                    icon: require('@/assets/map/layerIconNew/FIFTYYEAR.png'),
                                    show: false
                                },
                                HUNDREDYEAR: {
                                    id: 'HUNDREDYEAR',
                                    name: '100年一遇',
                                    icon: require('@/assets/map/layerIconNew/HUNDREDYEAR.png'),
                                    show: false
                                },
                                
                            }
                        },
                    }
                },
                {
                    groupName: '风险隐患调查与影响分析',
                    isShowAll: false,
                    children: {
                        FXYHBHDX: {
                            id: 'FXYHBHDX',
                            name: '风险隐患保护对象',
                            icon: require('@/assets/map/layerIconNew/FXYHBHDX.png'),
                            show: false,
                        },
                        KGDLQHTYB: {
                            id: 'KGDLQHTYB',
                            name: '跨沟道路、桥涵、塘堰坝',
                            show: false,
                            children: {
                                KGDL: {
                                    id: 'KGDL',
                                    name: '跨沟道路',
                                    icon: require('@/assets/map/layerIconNew/KGDL.png'),
                                    show: false
                                },
                                QLYHDC: {
                                    id: 'QLYHDC',
                                    name: '桥涵',
                                    icon: require('@/assets/map/layerIconNew/QLYHDC.png'),
                                    show: false
                                },
                                TYB: {
                                    id: 'TYB',
                                    name: '塘堰坝',
                                    icon: require('@/assets/map/layerIconNew/TYB.png'),
                                    show: false
                                }
                            }
                        },
                        MZGTZD: {
                            id: 'MZGTZD',
                            name: '沟滩占地情况调查成果',
                            icon: require('@/assets/map/layerIconNew/WXQ.png'),
                            show: false
                        },
                        WHDTDCFXCG: {
                            id: 'WHDTDCFXCG',
                            name: '外洪顶托调查分析成果',
                            icon: require('@/assets/map/layerIconNew/WHDTDCFXCG.png'),
                            show: false
                        },
                    }
                },

            ]
        }
    },
    computed: {
        SceneMode() {
            return this.$store.getters.SceneMode
        },
        pageState() {
            return this.$store.getters.pageState
        }
    },
    watch: {
        $route: {
            immediate: true,
            handler: function (val, oldVal) {
                if (val.path === '/reserveplan/visualization') {
                    this.$nextTick(() => {
                        this.$eventBus.$emit('openLayer', 'AZD')
                        this.$eventBus.$emit('openLayer', 'ZYLX')
                        this.$eventBus.$emit('openLayer', 'WXQ')
                        this.$eventBus.$emit('openLayer', 'RHDC')
                    })
                } if (this.$route.path === '/reserveplan/previewPlan') {

                } else {
                    this.$eventBus.$emit('closeLayer', 'AZD')
                    this.$eventBus.$emit('closeLayer', 'ZYLX')
                    this.$eventBus.$emit('closeLayer', 'WXQ')
                    this.$eventBus.$emit('closeLayer', 'RHDC')
                }
            }
        },
        pageState: {
            immediate: true,
            deep: true,
            handler: function (val, oldVal) {
                if (this.$route.path === '/reserveplan/previewPlan') {
                    if (!val.yuAn_YYYA_Load && val.yuAn_YYYA_Right_Type === 1) {
                        this.$nextTick(() => {
                            this.$eventBus.$emit('openLayer', 'AZD')
                            this.$eventBus.$emit('openLayer', 'ZYLX')
                            this.$eventBus.$emit('openLayer', 'WXQ')
                        })
                    } else {
                        this.$eventBus.$emit('closeLayer', 'AZD')
                        this.$eventBus.$emit('closeLayer', 'ZYLX')
                        this.$eventBus.$emit('closeLayer', 'WXQ')
                    }
                }
            }
        }
    },
    created() {
        // 专题图层通用事件管理器
        this.screenSpaceEventHandler = null

        this.$eventBus.$on('openLayer', (name) => {
            this.layerList2.forEach(group => {
                for (const id in group.children) {
                    if (id === name) {
                        if (!group.children[name].show) {
                            group.children[name].show = true
                            this.isShowLayer(name, true)
                        }
                    }
                }
            })
        })
        this.$eventBus.$on('closeLayer', (name) => {
            this.layerList2.forEach(group => {
                for (const id in group.children) {
                    if (id === name) {
                        if (group.children[name].show) {
                            group.children[name].show = false
                            this.isShowLayer(name, false)
                        }
                    }
                }
            })
        })
    },
    mounted() {

    },
    methods: {
        initEvent() {
            if (this.screenSpaceEventHandler) {
                this.screenSpaceEventHandler.destroy()
                this.screenSpaceEventHandler = null
            }
            this.screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(
                this.$viewer.scene.canvas
            )
            this.screenSpaceEventHandler.setInputAction((event) => {
                const pickedObject = this.$viewer.scene.pick(event.endPosition)
                if (
                    pickedObject &&
                    pickedObject.id &&
                    pickedObject.id.eventName/*  &&
                        pickedObject.id.eventName === '通用' */
                ) {
                    if (pickedObject.id.eventName === '通用' && event.endPosition.x) {
                        this.$viewer._container.style.cursor = 'pointer'
                        const popParams = this.$store.getters.popParams
                        popParams.name = '通用'
                        popParams.show = true
                        popParams.posX = Math.round(event.endPosition.x)
                        popParams.posY = Math.round(event.endPosition.y)
                        // popParams.remarks = pickedObject.id.prop
                        try {
                            var funName = `getRemarks${pickedObject.id.lid}`
                            if (
                                Object.hasOwnProperty.call(this, funName) &&
                                this[funName] instanceof Function
                            ) {
                                popParams.remarks = this[funName].call(
                                    this,
                                    pickedObject.id.prop
                                )
                                this.$store.dispatch('popParams', popParams)
                            }
                        } catch (e) {
                            console.log(e)
                        }
                    }
                } else {
                    this.$viewer._container.style.cursor = 'default'
                    this.$store.dispatch('closePop')
                }
            }, Cesium.ScreenSpaceEventType.MOUSE_MOVE)
        },

        // isShowGroup(group) {
        //     for (const id in group.children) {
        //         if (group.isShowAll) {
        //             if (!group.children[id].show) {
        //                 group.children[id].show = true
        //                 this.isShowLayer(id, true)
        //             }
        //         } else {
        //             this.isShowLayer(id, false)
        //             group.children[id].show = false
        //         }
        //     }
        // },

        // 勾选及图层显示
        handlerClick(id, checked, group){
            this.isShowLayer(id, checked)
            // 判断是否全选决定上一级是否勾选（此处为2层数据）
            let arrShow=[]
            for(const item in group.children){
                console.log('item',group.children[item].show);
                arrShow.push(group.children[item].show)
            }
            group.isShowAll=arrShow.every(item=>item)
        },
        // 最里层点击
        handlerClick2(id, checked, group,layer ){
            // console.log('group',group,'layer',layer);
            // （此处为3层数据）
            // 判断是否全选决定上一级是否勾选
            let arrShow=[]
            let arrShowOut=[]
            for(const item in layer.children){
                arrShow.push(layer.children[item].show)
            }
            layer.show=arrShow.every(item=>item)
            
            // 判断是否全选决定最上级是否勾选
            for(const item2 in group.children){
                arrShowOut.push(group.children[item2].show)
            }
            group.isShowAll=arrShowOut.every(item=>item)
            
            this.isShowLayer(id, checked)
        },

        isShowLayer(id, checked) {
            try {
                var param = {
                    "layerName": id,    // 名称
                    "bShow": checked  // 是否显示
                }
                callUIInteraction("Web_ShowLayer", param);
                console.log(id)
                if (checked) {
                    var creat = `this.creat${id}()`
                    eval(creat)
                } else {
                    var clear = `this.clear${id}()`
                    eval(clear)
                }
            } catch (e) {
                console.log(e)
            }
        },
        // 1213修改
        isShowGroup(group) {
            for (const id in group.children) {
                if (group.isShowAll) {
                    if (!group.children[id].show) {
                        group.children[id].show = true
                        this.isShowLayer(id, true)
                    }
                    if (group.children[id].children) {
                        for (const subId in group.children[id].children) {
                            if (!group.children[id].children[subId].show) {
                                group.children[id].children[subId].show = true
                                this.isShowLayer(subId, true)
                            }
                        }
                    }
                } else {
                    this.isShowLayer(id, false)
                    group.children[id].show = false
                    if (group.children[id].children) {
                        for (const subId in group.children[id].children) {
                            this.isShowLayer(subId, false)
                            group.children[id].children[subId].show = false
                        }
                    }
                }
            }
        },
        isShowGroupInner(layer,group) {
            // console.log('layer',layer,'group',group);
                for (const id in layer.children) {
                    if (layer.show) {
                        if(!layer.children[id].show){
                            layer.children[id].show = true
                            this.isShowLayer(id, true)
                        }
                    }else{
                            layer.children[id].show = false
                            this.isShowLayer(id, false)
                        }
                }
                // 判断是否全选决定最上级是否勾选
                let arrShowOut=[]
                for (const id in group.children) {
                    arrShowOut.push(group.children[id].show)
                }
                group.isShowAll=arrShowOut.every(item=>item)
            }
    }
}
</script>
<style lang="less"></style>
<style lang="less" scoped>
.LayerCtrl {
    position: relative;
    top: 0px;
    left: 0px;
    display: flex;
    flex-direction: column;
    padding: 5px;
    max-height: 90VH;
    overflow: auto;

    .group {
        .group-name {
            // color: #CCCCCC;
            color: #fff;
            font-size: 16px;
            font-weight: bold;
            padding: 5px;
            height: 36px;
            background: linear-gradient(90deg, rgba(0, 240, 255, 0.35) 0%, rgba(0, 240, 255, 0) 100%);

            .el-checkbox {
                width: 14px;
                height: 14px;
            }
        }

        .group-body {
            // border: 1px solid #5d8bc4;
            border-radius: 10px;
            padding: 5px;

            .row2 {
                background: rgba(0,5,46,0.5);
                padding: 8px 5px 4px 5px;

                /deep/.el-checkbox__input {
                    &.is-checked {
                        .el-checkbox__inner {
                            background: transparent; // #7FADFD;

                            &::after {
                                border-color: #fff; // #0A0C07;
                            }
                        }
                    }
                }

                img {
                    width: 20px;
                    height: 20px;
                }

                .imgs {
                    width: 21px;
                    height: 2px;
                }

                .imgss {
                    width: 21px;
                    height: 12px;
                }

                .name {
                    font-size: 12px;
                }
            }
            
            .row {
                display: flex;
                align-items: center;
                padding: 5px ;

                /deep/.el-checkbox__input {
                    &.is-checked {
                        .el-checkbox__inner {
                            background: #00C6FF; // #7FADFD;

                            &::after {
                                border-color: #fff; // #0A0C07;
                            }
                        }
                    }
                }

                img {
                    width: 20px;
                    height: 20px;
                }

                .imgs {
                    width: 21px;
                    height: 2px;
                }

                .imgss {
                    width: 21px;
                    height: 12px;
                }
                .imgs01{
                    width: 21px;
                    height: 8px;
                }
                

                .name {
                    font-size: 12px;
                }
            }
        }
    }

}
</style>
